<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>考试管理</el-breadcrumb-item>
      <el-breadcrumb-item>预约考试</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索区域 -->
      <el-row :gutter="20">
        <el-col :span="5">
          <el-select v-model="queryExamine.subject" clearable placeholder="请选择考试科目">
            <el-option
              v-for="item in subjectOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select v-model="queryExamine.stage" clearable placeholder="请选择考试阶段">
            <el-option
              v-for="item in stageOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker v-model="queryExamine.date" type="date" placeholder="请选择考试日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-col>
        <el-col :span="3">
          <el-button icon="el-icon-search" @click="getExamineList">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card>
      <!-- 考试列表区域 -->
      <el-table :data="examineList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="考试id" prop="id" v-if="false"></el-table-column>
        <el-table-column label="考试场次" prop="name" width="178px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="考试科目" prop="subject" width="100px"></el-table-column>
        <el-table-column label="总人数" prop="examNumber" width="90px">
          <template slot-scope="scope">
            {{ scope.row.examNumber }}人
          </template>
        </el-table-column>
        <el-table-column label="报名人数" prop="appointNumber" width="100px">
          <template slot-scope="scope">
            {{ scope.row.appointNumber }}人
          </template>
        </el-table-column>
        <el-table-column label="考试阶段" prop="stage" width="100px">
          <template slot-scope="scope">
            <el-tag :type="scope.row.stage==='报名结束'?'warning':scope.row.stage==='考试结束'?'info':''">
              {{ scope.row.stage }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="考试日期" prop="date" width="100px"></el-table-column>
        <el-table-column label="操作" width="216px">
          <template slot-scope="scope">
            <!-- 报名按钮 -->
            <el-button type="danger" icon="el-icon-circle-plus" size="mini" :disabled="scope.row.stage !== '报名中'"
                         @click="apple(scope.row.id)">报名</el-button>
            <!-- 取消报名按钮 -->
            <el-button type="primary" icon="el-icon-remove" size="mini" :disabled="scope.row.stage !== '报名中'"
                         @click="cancelApple(scope.row.id)">取消报名</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryExamine.page" :page-sizes="[5, 10, 20, 50]" :page-size="queryExamine.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "ExamineManage",
  data() {
    return {
      // 查询考试信息
      queryExamine: {
        page: 1,
        size: 10,
        subject: '',
        stage: '报名中',
        date: ''
      },
      subjectOptions: ['科目一', '科目二', '科目三', '科目四'],
      stageOptions: ['报名中', '报名结束', '考试中'],
      // 考试信息列表
      examineList: [],
      total: 0,

    }
  },

  created() {
    this.getExamineList()
  },
  methods: {
    // 获取考试列表
    getExamineList() {
      this.$http.post('/driver/examine/list', this.queryExamine).then(res => {
        if (res.data.code === 200) {
          this.examineList = res.data.data.examineList
          this.total = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },

    // 监听 size 改变的事件
    handleSizeChange(size) {
      this.queryExamine.size = size
      this.getExamineList()
    },
    // 监听 page 改变的事件
    handleCurrentChange(page) {
      this.queryExamine.page = page
      this.getExamineList()
    },
    // 报名
    apple(id) {
      this.$http.get('/driver/studentExamine/appoint', {
        params: {
          id: id
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.getExamineList()
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    // 取消报名
    cancelApple(id) {
      this.$http.get('/driver/studentExamine/cancel/appoint', {
        params: {
          id: id
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.getExamineList()
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },




  }
}
</script>

<style scoped>

</style>
